// schedule  [ˈskedʒuːl]  工作计划，日程安排; 时刻表; 节目表; 课程表; 清单
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from 'antd'
import { useEffect, useState, Key } from 'react';
import { ColumnsType } from 'antd/lib/table'
import {
  DepartmentList,
  ScheduleRuleList,
  ScheduleList
} from '@api/hospital/model/hospitalListTypes'
import {
  reqGetDepartmentList,
  reqGetScheduleRuleList,
  reqGetScheduleList
} from '@api/hospital/hospitalList';
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalSchedule() {
  // 声明树形组件的高度
  const TreeHeight = document.body.clientHeight - 64 - 34 - 24 * 2 - 70;
  // header 64  面包屑 34  card  24 * 2   footer 70  底部滚动条 17
  //   console.log(document.body.clientHeight)
  // 声明分页使用的数据
  const [current, setCurrent]= useState(1)
  const [pageSize, setPageSize]= useState(5)
  const [total, setTotal]= useState(0)
  // 声明头部面包屑导航信息
  const [hosname, setHosname] = useState('');
  const [depname, setDepname] = useState('');
  const [workDate, setWorkDate] = useState('');
  const [depcode, setDepcode] = useState('');
  // 声明科室信息
  const [departmentList, setDepartmentList] = useState<DepartmentList>([])
  // 声明默认展开的数据
  const [expandedKeys, setExpandedKeys] = useState<Key[]>([])
  // 声明排班规则list数据 - 默认只有第一个科室的第一个专业才有数据
  const [scheduleRuleList, setScheduleRuleList] = useState<ScheduleRuleList>([])
  // 声明医生排班数据
  const [scheduleList, setScheduleList] = useState<ScheduleList>([]);
  // 声明路由参数信息的hooks
  const params = useParams();
  const navigate = useNavigate()

  // 异步请求的函数
  async function renderData(page = current, limit = pageSize) {
    // 做一个类型断言解决传参问题
    const res = await reqGetDepartmentList(params.id as string);
    // console.log(res);
    setDepartmentList(res.map(item => {
      return {
        ...item,
        // 把科室信息禁用，不能选择
        disabled: true
      }
    }))
    // 把每一个医院的code放置在展开的数组中
    setExpandedKeys(res.map(item => item.depcode))

    // 在第一次请求回来所有的科室之后，才能发起第二次请求
    // 科室数据的第一项有没有children，有children 就把 children的第一个科室编码获取到
    const depcode = res[0].children ? res[0].children[0].depcode : '';
    // 同步科室和门诊的名称
    const depname = res[0].children ? res[0].children[0].depname : '';
    setDepname(depname)

    // 调用第2次和第3次请求
    await getSchedules({ page, limit, depcode, hoscode: params.id as string })
  }

  // 挂载阶段的生命周期函数
  useEffect(() => {
    renderData()
  }, [])

  // 02 次请求和 03 请求
  async function getSchedules({page, limit, depcode, hoscode}: any) {
    const { 
      bookingScheduleList: b1, 
      total, 
      baseMap: { hosname } 
    } = await reqGetScheduleRuleList({
      page, limit, hoscode, depcode
    })
    // 同步预约规则信息，和总条数
    setScheduleRuleList(b1);
    setCurrent(page);
    setPageSize(limit);
    setTotal(total);
    // 同步医院信息
    setHosname(hosname)
    setWorkDate(b1[0].workDate)
    
    // 获取第三次数据
    setDepcode(depcode);
    await get03Data({depcode, workDate: b1[0].workDate});
  }

  // 抽离的第3次请求
  async function get03Data({depcode, workDate}: any) {
    console.log(depcode, workDate);
    
    // 第三次的请求，是在第二次和第一次之上的
    const res2 = await reqGetScheduleList({
      hoscode: params.id as string, 
      depcode, 
      workDate
    })
    setScheduleList(res2);
  }

  // 当左侧的门诊触发选择，右侧的数据要重新请求
  function onSelect(selectedKeys: Key[], info: any) {
    // console.log(selectedKeys);
    // console.log(info);
    // 清空表格的数据
    setScheduleList([])
    // 重新切换数据
    const str = selectedKeys[0]
    setDepcode(str as string)
    getSchedules({ 
      page: current, 
      limit: pageSize, 
      // 门诊的编码
      depcode: selectedKeys[0], 
      hoscode: params.id as string 
    })
  }

  const columns: ColumnsType<any> = [
    {
        title: '序号',
        render(value, row, index: number) {
            return index + 1
        }
    },
    {
        title: '职称',
        dataIndex: 'title'
    },
    {
        title: '号源时间',
        dataIndex: 'workDate'
    },
    {
        title: '总预约数',
        dataIndex: 'reservedNumber'
    },
    {
        title: '剩余预约数',
        dataIndex: 'availableNumber'
    },
    {
        title: '挂号费(元)',
        dataIndex: 'amount'
    },
    {
        title: '擅长技能',
        dataIndex: 'skill'
    }
  ]

  return (
    <Card>
      {/* 1. 选择的信息 */}
      <div className="choose-info">
        <p>选择：{hosname} / {depname} / {workDate}</p>
      </div>

      {/* 2. 左右的布局 */}
      {/* 
          Row 是行组件，Col 是列组件，列组件嵌套在行组件中
          span 是行的属性，意味着跨列，或者平分宽度的意思
          gutter 列间距
      */}
      <Row gutter={20}>
        <Col span={6}>
          <div
            style={{
              height: TreeHeight,
              border: '1px solid #ccc',
              overflowY: 'scroll',
            }}
          >
            {/* 2.1 树形组件 */}
            <Tree 
                // antd 官方的问题，给了数组它不敢认，除非是直接的数组 
                treeData={departmentList as []} 
                // 自定义展示的字段
                fieldNames={{
                  title: 'depname',
                  key: 'depcode'
                }}
                // defaultExpandedKeys 只能识别默认就有的，动态不行
                // 异步请求回来的数据使用该属性
                expandedKeys={expandedKeys}
                // 选择事件
                onSelect={onSelect}
            />
          </div>
        </Col>
        <Col span={18}>
            {/* 2.2 卡片 */}
            {
              scheduleRuleList.map(item => {
                return <Tag 
                        key={item.workDate}
                        color={item.workDate === workDate ? 'green' : ''}
                        onClick={() => {
                          setWorkDate(item.workDate);
                          get03Data({ depcode, workDate: item.workDate });
                        }}
                        >
                          <div>{item.workDate} / { item.dayOfWeek }</div>
                          <span>{item.availableNumber} / {item.reservedNumber}</span>
                      </Tag>
              })
            }

            {/* 2.3 分页布局 */}
            <Pagination
                style={{
                    margin: '30px 0'
                }}
                showSizeChanger
                current={current}
                pageSize={pageSize}
                total={total}
                onChange={renderData}
            />

            {/* 2.4 表格展示 */}
            <Table
                columns={columns}
                dataSource={scheduleList}
                bordered
                rowKey="id"
            />
            {/* 2.5 返回按钮 */}

            <Button 
              style={{ marginTop: 30 }} 
              type="primary"
              onClick={() => navigate('/syt/hospital/hospitallist')}
            >返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
